<template>
  <div class="app-container">
    <div class="tab">
      <div class="left">{{ workManagement.name }}</div>
      <span class="right">
        <router-link v-permission="['projectInfo:create']" :to="{ name: 'CreateNetwork'}">
          <span class="btn">
            创建工程
          </span>
        </router-link>
        <router-link v-permission="['projectInfo:edit']" :to="{ name: 'EdgeNetwork'}">
          <span class="btn">
            编辑工程
          </span>
        </router-link>
        <!-- <span  @click="delNetwork">删除工程</span> -->
        <span v-if="projects.length>1" v-permission="['projectInfo:delete']" class="btn" @click="dialogDelVisible=true">删除组织</span>
      </span>
    </div>
    <div class="main">
      <div class="des" :title="workManagement.description">
        {{ workManagement.description||'--' }}
      </div>
    </div>
    <div class="tab">
      <div class="left">
        <div class="info">
          <div><div>项目类型：</div>
            <span>{{ workManagement.projectTypeName||'--' }}</span>
          </div>
          <div>
            <div>计划开工时间：</div>
            <span>{{ workManagement.planStartTime||'--' }}</span>
          </div>
          <div>
            <div>建设单位：</div>
            <span>{{ workManagement.buildUnit||'--' }}</span>
          </div>
          <div>
            <div>监理单位：</div>
            <span>{{ workManagement.supervisorUnit||'--' }}</span>
          </div>
          <div>
            <div>勘察单位：</div>
            <span>{{ workManagement.surveyUnit||'--' }}</span>
          </div>
          <div>
            <div>建筑面积：</div>
            <span class="text">{{ workManagement.builtArea||'--' }}</span>
          </div>
        </div>
      </div>
      <div class="right div-right">
        <div class="info">
          <div>
            <div>工程造价：</div>
            <span class="text">{{ workManagement.projectCost||'--' }}</span>
          </div>
          <div>
            <div>计划竣工时间：</div>
            <span class="text">{{ workManagement.planCompletionTime ||'--' }}</span>
          </div>
          <div>
            <div>设计单位：</div>
            <span class="text">{{ workManagement.designUnit||'--' }}</span>
          </div>
          <div>
            <div>施工单位：</div>
            <span class="text">{{ workManagement.constructionUnit||'--' }}</span></div>
          <div>
            <div>工程状态：</div>
            <span v-if="workManagement.status=='before'" class="text noStatusColor">未开工</span>
            <span v-else-if="workManagement.status=='inProgress'" class="text doingStatueColor">施工中</span>
            <span v-else-if="workManagement.status=='finshed'" class="text stopStatusColor">已竣工</span>
            <span v-else class="text extensionStatusColor">已延期</span>
          </div>
        </div>
      </div>
    </div>
    <delete-dialog
      :dislog-name="teamDetail.name"
      :dialog-del-visible="dialogDelVisible"
      :title="'组织'"
      @funcancl="funcancl"
      @func="deleteData"
    />
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { projectDetail, deleteProject } from '@/api/project'
import DeleteDialog from '@/components/dialog/delete'
import { mapGetters } from 'vuex'

export default {
  components: {
    DeleteDialog
  },
  props: {
    teamDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      workManagement: {},
      listLoading: true,
      dialogDelVisible: false
      // typeStetusList: [
      //   { type: 'before', name: '未开工' },
      //   { type: 'inProgress', name: '施工中' },
      //   { type: 'finshed', name: '已完成' }
      // ]
    }
  },
  computed: {
    ...mapGetters([
      'projects',
      'projectsId'
    ])
  },
  created() {
    this.fetchData()
  },
  mounted() {
    // console.log(this.projectsId)
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      const res = await projectDetail(this.projectsId)
      if (res.code === 200) {
        this.workManagement = res.data
      } else {
        Message({
          message: res.data.msg || 'Error',
          type: 'error',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
    },
    funcancl(val) {
      this.dialogDelVisible = false
    },
    deleteDialog() {
      this.dialogDelVisible = true
    },
    async deleteData() {
      const id = this.projectsId
      const res = await deleteProject([id])
      if (res.code === 200) {
        this.dialogDelVisible = false
        this.$message({
          type: 'success',
          message: '删除成功!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
        for (let i = 0; i < this.projects.length; i++) {
          if (this.projects[i].id === this.projectsId) {
            this.projects.splice(i, 1)
          }
        }
        this.$store.commit('user/SET_PROJECTS', this.projects)
        this.$store.commit('user/SET_PROJECTSID', this.projects[0].id)
        this.$router.push('/')
      } else {
        this.dialogDelVisible = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../styles/variables';
.noStatusColor{
  background:rgba(117,132,155,1);
  border-radius:2px;
  padding: 5px 5px 5px 5px;
}
.doingStatueColor{
  background:rgba(34,194,247,1);
  border-radius:2px;
  padding: 5px 5px 5px 5px;
}
.extensionStatusColor{
  background:rgba(254,152,61,1);
  border-radius:2px;
  padding: 5px 5px 5px 5px;
}
.stopStatusColor{
  background:rgba(16,192,56,1);
  border-radius:2px;
  padding: 5px 5px 5px 5px;
}
.app-container{
  .tab{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    margin: 32px 0 0 35px;
    font-size: 14px;
    font-weight: 400;
    color: $textcolor;
    .left{
      font-size: 20px;
      font-weight: 500;
      // width: 500px;
      .info{
        font-size:$fontSize14;
        font-weight:400;
        color:rgba(247,181,0,0.8);
        text-align: end;
        div{
          margin-bottom: 10px;
          display: flex;
        }
        span{
          font-size:$fontSize14;
          font-weight:400;
          color:rgba(255,255,255,0.65);
        }
      }
    }
    .right{
      margin-right: 20px;
      .btn{
        cursor: pointer;
        width:88px;
        height:32px;
        background:$btnNoNativeColor;
        color:rgba(255,255,255,0.8);
        padding: 10px 5px 10px 5px;
        margin-right: 8px;
      }
      .btn:hover{
        background:$btnactiveColor;
        color:rgba(255,255,255,1);
      }
      .info{
        font-size:$fontSize14;
        font-weight:400;
        color:rgba(247,181,0,0.8);
        text-align: end;
        div{
          margin-bottom: 10px;
          display: flex;
        }
        .text{
          font-size:$fontSize14;
          font-weight:400;
          color:rgba(255,255,255,0.65);
          // padding: 5px 5px 5px 5px
        }
      }
    }
    .div-right{
      position: absolute;
      margin: 0 0 0 40%;
      flex: auto;
    }
  }
  .main{
    margin: 30px 20px 0 33px;
    font-size:$fontSize14;
    font-weight:400;
    color:rgba(255,255,255,0.85);
    div{
    line-height: 23px;
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* text-overflow: ellipsis; */
    -webkit-box-orient: vertical;
    }
  }
}
</style>
